<!-- 首页组件 -->
<template>
  <div class="index">
    <div v-infinite-scroll="loadMore" infinite-scroll-distance="10">
      <div class="swipe-wrap">
        <Swipe @changeColor="getIndexColor" />
      </div>
      <div class="index-bg" :style="styleObj" v-if="!hideBg"></div>
      <div class="index-bg2" v-if="hideBg"></div>
      <div class="container">
        <QuickNav />
        <IndexNews />
      </div>
      <div class="container">
        <MiaoSha />
      </div>
      <div class="container">
        <!-- tab切换 -->
        <div class="listTab">
          <ul>
            <li
              v-for="(listTabData,index) in listTabDatas"
              :key="index"
              @click="changeTab(index,listTabData.type)"
            >
              <h3>{{listTabData.title}}</h3>
              <p :class="tabIndex==index?'active':''">{{listTabData.text}}</p>
            </li>
          </ul>
        </div>
        <List :lists="indexLists" :isLoading="isLoading" />
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Swipe from "@/components/Swipe/Swipe";
import QuickNav from "../components/QuickNav";
import IndexNews from "../components/IndexNews";
import MiaoSha from "../components/MiaoSha";
import List from "@/components/List/List";
// import { getIndexListApi } from "@/api/index";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Swipe,
    QuickNav,
    IndexNews,
    MiaoSha,
    List,
  },
  data() {
    //这里存放数据
    return {
      colorArr: [
        {
          background: "#f55",
        },
        {
          background: "blue",
        },
      ],
      styleObj: {},
      hideBg: false,
      listTabDatas: [
        {
          id: 1,
          title: "精选",
          text: "为您推荐",
          type: "is_best",
        },
        {
          id: 2,
          title: "社区",
          text: "新奇好物",
          type: "is_best",
        },
        {
          id: 3,
          title: "新品",
          text: "潮流上新",
          type: "is_new",
        },
        {
          id: 4,
          title: "热卖",
          text: "火热爆款",
          type: "is_hot",
        },
      ],
      tabIndex: 0,
      page: 1,
      size: 10,
      type: "is_best",
    };
  },
  computed: {
    indexLists() {
      return this.$store.state.indexListDatas;
    },
    isLoading() {
      return this.$store.state.isLoading;
    },
  },
  methods: {
    getIndexColor(dataIndex) {
      // console.log(dataIndex);
      this.styleObj = this.colorArr[dataIndex];
    },
    scrollIndexPage() {
      // console.log(document.documentElement.scrollTop);
      if (document.documentElement.scrollTop > 100) {
        this.hideBg = true;
      } else {
        this.hideBg = false;
      }
    },
    changeTab(index, type) {
      this.tabIndex = index;
      this.type = type;
      this.page = 1;
      console.log(this.$store.state.indexListDatas);
      this.$store.state.indexListDatas = [];
      this.$store.dispatch("actChangeIndexListDatas", {
        page: this.page,
        size: this.size,
        type: this.type,
      });
    },
    getIndexListApiFn() {
      this.$store.dispatch("actChangeIndexListDatas", {
        page: this.page,
        size: this.size,
        type: this.type,
      });
    },
    loadMore() {
      console.log(123456);
      console.log(this.isLoading);
      if (this.isLoading) {
        this.page++;
      }
      this.getIndexListApiFn();
    },
  },
  mounted() {
    window.addEventListener("scroll", this.scrollIndexPage, false);
  },
};
</script>
<style lang="less">
.index {
  padding-bottom: 5rem;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  // background: red;
}
.container {
  width: 100%;
  width: calc(100% - 2rem);
  background: #fff;
  margin: 2rem 1rem;
  border-radius: 1rem;
}
.index-bg {
  height: 15rem;
  background: green;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
}
.index-bg2 {
  height: 9.5rem;
  background: #f55;
  position: fixed;
  z-index: 998;
  top: 0;
  left: 0;
  width: 100%;
}
.swipe-wrap {
  position: relative;
  z-index: 998;
  top: 1rem;
}
.listTab {
  ul {
    width: 100%;
    height: 4rem;
    padding: 1rem 0;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    li {
      flex: 1;
      text-align: center;
      h3 {
        font-size: 1.6rem;
      }
      p {
        font-size: 1.2rem;
        height: 2rem;
        line-height: 2rem;
        width: 80%;
        margin-left: 10%;
        border-radius: 1rem;
      }
      .active {
        background: #f55;
        color: #fff;
      }
    }
  }
}
</style>